<template>
  <div class="box">
    <el-row :gutter="20" type="flex">
      <el-col :span="6">
        <div class="col1">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>试题标签</span>

              <el-button
                slot="reference"
                type="text"
                style="float: right; padding: 3px 0"
                @click="visibles.open = true"
                >添加</el-button
              >
            </div>
            <el-table :data="labelList" style="width: 100%">
              <el-table-column prop="questionTypesName" label="名称">
              </el-table-column>
              <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-edit"
                    circle
                    @click="col1Edit(scope.row)"
                  ></el-button>
                  <el-button
                    type="danger"
                    size="mini"
                    icon="el-icon-delete"
                    circle
                    @click="col1Remove(scope.row)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- --------------- -->
            <pagination
              v-show="total > 0"
              :total="total"
              layout='total, sizes, prev, pager, next'
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getLabelList"
            />
            <!-- --------------- -->
          </el-card>
          <el-dialog title="提示" :visible.sync="visibles.open" width="350px">
            <div style="height: 120px">
              <el-form
                ref="col1Form"
                :rules="col1FormRule"
                :model="form"
                label-width="80px"
              >
                <el-form-item
                  required
                  prop="questionTypesName"
                  label="标签名称"
                >
                  <el-input v-model="form.questionTypesName"></el-input>
                </el-form-item>
              </el-form>
              <el-button
                style="float: right; margin: 20px 0 20px"
                @click="col1Sub"
                >提交</el-button
              >
            </div>
          </el-dialog>
        </div>
      </el-col>
      <el-col :span="6"></el-col>
      <el-col :span="6"></el-col>
      <el-col :span="6"></el-col>
    </el-row>
  </div>
</template>
<script>
import {
  listTypes,
  getTypes,
  delTypes,
  addTypes,
  updateTypes,
} from "@/api/questionBank/type.js";
export default {
  data() {
    return {
      labelList: [],
      visibles: {
        open: false,
      },
      form: {
        questionTypesName: "",
      },
      col1FormRule: {
        questionTypesName: [
          { required: true, message: "标签名称", trigger: "submit" },
        ],
      },
      queryParams:{
        pageNum:1,
        pageSize:10
      },
      total:0
    };
  },
  mounted() {
    this.getLabelList();

  },

 

  watch: {
    "visibles.open": function (n, o) {
      if (!n) {
        this.form = {
          questionTypesName: "",
        };
        this.$refs.col1Form.resetFields();
      }
    },
  },

  methods: {
    getLabelList() {
      listTypes(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.labelList = res.rows;
          this.total=res.total
        }
      });
    },
    col1Sub() {
      console.log(this.form);
      this.$refs.col1Form.validate((valid) => {
        if (valid) {
          if (this.form.questionTypesId) {
            updateTypes(this.form).then((res) => {
              if (res.code == 200) {
                this.visibles.open = false;
                this.$message.success("修改成功");
                this.getLabelList();
              }
            });
          } else {
            addTypes(this.form).then((res) => {
              if (res.code == 200) {
                this.visibles.open = false;
                this.$message.success("添加成功");
                this.getLabelList();
              }
            });
          }
        }
      });
    },
    col1Edit(val) {
      this.form = val;
      this.visibles.open = true;
    },
    col1Remove(val) {
      this.$alert("确定要删除" + val.questionTypesName + "吗", "请确认", {
        confirmButtonText: "确定",
        callback: (action) => {
          delTypes(val.questionTypesId).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: `删除成功`,
              });
              this.getLabelList();
            }
          });
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  height: 100%;
  width: 100%;
  padding: 20px;
  background-color: #f5f7fa;
  .col1 {
    ::v-deep .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th {
      background-color: #fff;
    }
  }
  .el-col{
    min-width: 500px;
  }
}
</style>
